import { Input, Form, DatePicker, TreeSelect, Switch, InputNumber, Radio, Select, Col } from 'antd';

const FormBuilder = (data: BasicListApi.Field[] | undefined, colNumb: number) => {
  return (data || []).map((field) => {
    const basicAttr = {
      label: field.title,
      name: field.key,
      key: field.key,
    };
    const rules = [{ required: field.requiredInForm, message: `${field.title}不可为空` }];
    let xsColNumb = colNumb * 2;
    if (xsColNumb > 24) {
      xsColNumb = 24;
    }
    switch (field.type) {
      case 'text':
        return (
          <Col sm={colNumb} xs={xsColNumb}>
            <Form.Item {...basicAttr} rules={rules}>
              <Input disabled={field.editDisabled} />
            </Form.Item>
          </Col>
        );
      case 'datetime':
        if (field.key !== 'update_time') {
          return (
            <Col sm={colNumb} xs={xsColNumb}>
              <Form.Item {...basicAttr} rules={rules}>
                <DatePicker showTime disabled={field.editDisabled} />
              </Form.Item>
            </Col>
          );
        }
        return null;
      case 'tree':
        return (
          <Col sm={colNumb} xs={xsColNumb}>
            <Form.Item {...basicAttr} rules={rules}>
              <TreeSelect
                treeData={field.data}
                disabled={field.editDisabled}
                treeCheckable
                showCheckedStrategy="SHOW_ALL"
                treeCheckStrictly={true}
              />
            </Form.Item>
          </Col>
        );
      case 'switch':
        return (
          <Col sm={colNumb} xs={xsColNumb}>
            <Form.Item {...basicAttr} valuePropName="checked" rules={rules}>
              <Switch disabled={field.editDisabled} defaultChecked={true} />
            </Form.Item>
          </Col>
        );
      case 'number':
        return (
          <Col sm={colNumb} xs={xsColNumb}>
            <Form.Item {...basicAttr} rules={rules}>
              <InputNumber disabled={field.editDisabled} />
            </Form.Item>
          </Col>
        );
      case 'textarea':
        return (
          <Col sm={colNumb} xs={xsColNumb}>
            <Form.Item {...basicAttr} rules={rules}>
              <Input.TextArea disabled={field.editDisabled} />
            </Form.Item>
          </Col>
        );
      case 'radio':
        return (
          <Col sm={colNumb} xs={xsColNumb}>
            <Form.Item {...basicAttr} rules={rules}>
              <Radio.Group
                buttonStyle="solid"
                defaultValue={field.data[0]?.value}
                disabled={field.editDisabled}
              >
                {(field.data || []).map((item: any) => {
                  return <Radio.Button value={item.value}>{item.title}</Radio.Button>;
                })}
              </Radio.Group>
            </Form.Item>
          </Col>
        );
      case 'select':
        return (
          <Col sm={colNumb} xs={xsColNumb}>
            <Form.Item {...basicAttr} rules={rules}>
              <Select allowClear disabled={field.editDisabled}>
                {(field.data || []).map((option: any) => {
                  return (
                    <Select.Option value={option.value} key={option.value}>
                      {option.title}
                    </Select.Option>
                  );
                })}
              </Select>
            </Form.Item>
          </Col>
        );
      case 'selects':
        return (
          <Col sm={colNumb} xs={xsColNumb}>
            <Form.Item {...basicAttr} rules={rules}>
              <Select allowClear disabled={field.editDisabled} mode="multiple">
                {(field.data || []).map((option: any) => {
                  return (
                    <Select.Option value={option.value} key={option.value}>
                      {option.title}
                    </Select.Option>
                  );
                })}
              </Select>
            </Form.Item>
          </Col>
        );
      case 'parent':
        return (
          <Col sm={colNumb} xs={xsColNumb}>
            <Form.Item {...basicAttr} rules={rules}>
              <TreeSelect
                disabled={field.editDisabled}
                showSearch
                style={{ width: '100%' }}
                dropdownStyle={{ maxHeight: 600, overflow: 'auto' }}
                treeData={field.data}
                placeholder="请选择"
                listHeight={200}
                treeDefaultExpandAll
                allowClear
              />
            </Form.Item>
          </Col>
        );
      default:
        return null;
    }
  });
};

export default FormBuilder;
